<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件-->
    <script src = "js/vue.js"></script>

    <style>
        table{
            width: 500px;
            border:1px solid pink ;
            border-collapse: collapse;
            text-align: center;
        }

        table th ,table td{
            border: 1px solid pink ;
        }

        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!--创建一个容器-->
    <div id="app">
           <!-- 需求： 完成增删改查，并排序-->
          <h2 align = "center">用户的增删改查</h2>
          <p align  = "center">姓名：<input  v-model = "user.name"> 
          年龄：<input  v-model = "user.age"> 
          地址：<input  v-model = "user.address"> 
          <button @click = "addUser">添加用户</button></p>
          <p align = "center">
               姓名：<input v-model = "name">
               地址：<input v-model = "address">
               年龄: <input v-model = "min"> - <input v-model = "max">
               <button @click = "search">搜索</button>
          </p>
          <table align = "center">
               <tr>
                   <th>编号</th>
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>地址</th>
                   <th>操作</th>
               </tr>
               <tr v-for = "(item,index) in list" :key = "item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.address}}</td>
                    <td>
                        <a href = "#" @click = "modifyUser(index,item.id)">修改</a>&nbsp;&nbsp;
                        <a href = "#" @click = "del(index)">删除</a>&nbsp;&nbsp;
                    </td>
               </tr>
          </table>
          <!--修改-->
          <p align = "center">修改功能: <br>
            姓名：<input  v-model = "user.name"> 
            年龄：<input  v-model = "user.age"> 
            地址：<input  v-model = "user.address"> 
            <button @click = "modify">修改用户</button></p>
            <p align = "center">
                <button @click = "order('id',1)">根据id升序</button>
                <button @click = "order('id',-1)">根据id降序</button>
                <button @click = "order('age',1)">根据年龄升序</button>
                <button @click = "order('age',-1)">根据年龄降序</button>
                <button @click = "reverseOrder">逆序</button>
                <button @click = "sourceOrder">恢复原始顺序</button>
            </p>
    </div>

    <script>
        //创建一个控制器，控制容器显示的数据
        let vm = new Vue({
            el: '#app' ,  //控制那个容器
            data: {   //定义数据
                list: [  //定义了一个数组
                    {id: 2, name : '郭靖', age: 25,address: '上海'} ,
                    {id: 1, name : '张无忌', age: 20,address: '北京'} ,
                    {id: 3, name : '杨过', age: 23,address: '北京'} ,
                    {id: 4, name : '乔峰', age: 22,address: '上海'} ,
                ]   ,
                user: {
                    id: -1 ,
                    name: '' ,
                    age: 0,
                    address: ''
                },
                position: -1 ,   //作用就是记录修改记录的位置索引
                newId: -1 ,  //作用就是记录修改用户的id
                name: ' ' ,
                address: '' ,
                min: '',
                max: '' ,
                list1: [    //和list一样。
                     {id: 2, name : '郭靖', age: 25,address: '上海'} ,
                    {id: 1, name : '张无忌', age: 20,address: '北京'} ,
                    {id: 3, name : '杨过', age: 23,address: '北京'} ,
                    {id: 4, name : '乔峰', age: 22,address: '上海'} ,
                ]
            },
            methods: {
                addUser(){
                     //先找到最大的id
                    let max = 0 ;
                    this.list.forEach(u => u.id>max ? max = u.id : '')
                    //将max赋值给user对象的id
                    this.user.id = max + 1 ;
                    //此处应该复制一个新的user对象
                    let newUser = {...this.user }   //注意此处用{}
                    console.log(newUser)
                    //将用户添加到数组中
                    this.list.push(newUser)
                    //list1添加一份
                    this.list1.push(newUser)
                } ,
                modifyUser(index,id){
                    //从数组中根据索引获取相应的对象，赋值给user
                    let newUser = {...this.list[index]}
                    this.user = newUser ;
                    this.position = index // 此处记录了位置索引
                    this.newId = id 
                },
                modify(){
                    //真正修改用户
                    //将修改后的用户(user)放到对应的位置上
                    //此处通过position就获取到索引位置
                    //此处有两种思路： 1是从数组中获取到position位置上的对象，然后修改信息即可
                    //思路2就是将position位置上的对象删除，然后将新对象添加到此处即可
                    //显然第二种简单，但记得第二种没有id,索引还得要在修改的表单中记录id

                    //给user用户设置id
                    this.user.id = this.newId 
                    //将user赋值一份添加到数组中
                    let newUser = {...this.user}
                    //添加到数组中
                    this.list.splice(this.position,1,newUser)
                    //list1也要添加一份
                    this.list1.splice(this.position,1,newUser)
                },
                del(index){
                     //删除数据
                     this.list.splice(index,1)
                     this.list1.splice(index,1)
                },
                search(){
                    //判断用户是否输入了各个文本框
                    //先创建一个数组，放置最终的结果
                    let arr = [] ;
                    console.log(this.name.trim().length)
                    //根据姓名来查
                    let names = this.list1.filter( u => u.name.startsWith(this.name.trim())) ;
                    console.log("names",names)
                    //也可以最终再放
                    //根据地址来查
                    let addresss = [] 
                    if(this.address){
                        addresss =  this.list1.filter( u => u.address.startsWith(this.address.trim())) ;
                    }
                    console.log("addresss:",addresss)
                    //根据年龄来查
                     //用户输入了年龄就查，不输入就不查
                    //根据年龄进行搜索
                    let ages = [] 
                    if(this.min !== "" && this.max != "") 
                        ages =  this.list1.filter( u => u.age >= this.min *1 && u.age <= this.max) ;
                    console.log("ages",ages)
                    //最后将三个数组进行汇总，如果是同时的关系，还得要判断，我们这里简单点，或的关系吧
                    //还要考虑一点，重复的数据
                    arr = [...names,...addresss,...ages] 
                    //去除重复的数据
                    arr = [...new Set(arr)]

                    console.log("arr:",arr)

                    //最后页面显示的是list的数据(循环的是list),所以将arr赋值给List
                    this.list = arr ;
                } ,
                order(type,n){
                    //根据类型，再根据n的值判断
                    if(type === "id"){
                        //表示根据id排序
                        if(n > 0)
                             //表示升序
                             this.list.sort((u,u1) => u.id -u1.id)
                        else
                            //降序
                            this.list.sort((u,u1) => u1.id -u.id)
                    }
                    if(type === "age"){
                        //根据年龄进行排序
                        if(n> 0)  //升序
                            this.list.sort((u,u1) => u.age -u1.age)
                        else  //降序
                            this.list.sort((u,u1) => u1.age -u.age)
                    } 
                } ,
                reverseOrder(){
                    //将顺序逆序即可,调用数组的逆序方法即可
                    this.list.reverse() ;

                },
                sourceOrder(){
                    //只需要将list1中的数据赋值一份到list中即可
                    //不要直接让list指向list1,否则添加删除数据后又会出错
                    this.list = [...this.list1]
                }

            },
        })
    </script>
</body>
</html>